<template>
	<view class="da-dropdown-daterange-box">
		<view class="da-dropdown-daterange-box-one">
			<view style="font-size: 22rpx; font-weight: 550;margin-right: 10rpx;">开始日期时间:</view>
			<view class="da-dropdown-daterange">
				<picker mode="date" :value="daterange.start" @change="handleStartDate">
					{{ daterange.start || '开始日期' }}

				</picker>
			</view>
			-
			<view class="da-dropdown-daterange">
				<picker mode="time" :value="daterange.startTime" @change="handleStartTime">
					{{ daterange.startTime || '开始时间' }}

				</picker>
			</view>

		</view>
		<view class="da-dropdown-daterange-box-two">
			<view style="font-size: 22rpx; font-weight: 550;margin-right: 10rpx;">结束日期时间:</view>
			<view class="da-dropdown-daterange">
				<picker mode="date" :value="daterange.end" :disabled="!daterange.start" :start="daterange.start"
					@change="handleEndDate">
					{{ daterange.end || '结束日期' }}
				</picker>
			</view>
			-
			<view class="da-dropdown-daterange">
				<picker mode="time" :value="daterange.endTime" :disabled="!daterange.start" :start="daterange.start"
					@change="handleEndTime">
					{{ daterange.endTime || '结束时间' }}
				</picker>
			</view>

		</view>

			<u-toast ref="uToast"></u-toast>
		<PartDropdownFooter :resetText="dropdownItem.resetText" :confirmText="dropdownItem.confirmText"
			@reset="handleReset()" @confirm="handleConfirm()"></PartDropdownFooter>
	</view>
</template>

<script>
	import {
		defineComponent,
		ref,
		watch,
		getCurrentInstance
	} from 'vue'
	
	import {
		deepClone,
		getRangeDate
	} from '../utils'
	import PartDropdownFooter from './part-dropdown-footer.vue'

	export default defineComponent({
		
		components: {
			PartDropdownFooter
		},
		props: {
			dropdownItem: {
				type: Object,
				default: null,
			},
			dropdownIndex: {
				type: Number,
			},
		},
		emits: ['success'],
		setup(props, {
			emit
		}) {
			const daterange = ref(null)
			const datetag = ref('')
			const dateTagList = ref([{
					value: '-7',
					label: '本周'
				},
				{
					value: '-14',
					label: '上周'
				},
				{
					value: '-30',
					label: '本月'
				},
				{
					value: '-60',
					label: '上月'
				},
				// { value: '-1', label: '昨日' },
				{
					value: '7',
					label: '近7天'
				},
				{
					value: '15',
					label: '近15天'
				},
				{
					value: '30',
					label: '近30天'
				},
			])

			function initData(dropdownItem, clearValue = false) {
				const item = deepClone(dropdownItem || null)
				if (clearValue === true) {
					daterange.value = {
						start: '',
						end: '',
						startTime:'',
						endTime:''
					}
					datetag.value = ''
				} else {
					
					daterange.value = {
						start: item.value?.start || '',
						end: item.value?.end || '',
						startTime: item.value?.startTime || '',
						endTime: item.value?.endTime || '',
					}
				}
			}

			function handleStartDate(item) {
				daterange.value.start = item.detail.value
				daterange.value.end = ''
				datetag.value = ''
			}

			function handleStartTime(item) {
				daterange.value.startTime = item.detail.value
				
			}
			function handleEndTime(item){
				daterange.value.endTime = item.detail.value
				
			}
			let {
				proxy
			} = getCurrentInstance();
			function handleEndDate(item) {
				if (!daterange.value?.start) {
					return
				}
				const oneMonth = 1000 * 60 * 60 * 24 * 30; // 毫秒数表示的一个月
				if(Math.abs( new Date(daterange.value.start).getTime() -  new Date(item.detail.value).getTime()) > oneMonth){
					proxy.$refs.uToast.show({
						type: 'error',
						message: '开始结束日期最大长度为一个月!'
					})
					daterange.value.end=''
				}else{
					daterange.value.end = item.detail.value
					datetag.value = ''
				}
				 
				
				
			}

			function handleTagDate(code) {
				daterange.value = getRangeDate(code)
				datetag.value = code
			}

			function handleReset() {
				console.log('props.dropdownItem',props.dropdownItem)
				initData(props.dropdownItem, true)
			}

			function handleConfirm() {
				if (props.dropdownItem?.prop) {
					const res = {
						[props.dropdownItem.prop]: deepClone(daterange.value)
					}
					
					emit('success', res, daterange.value, props.dropdownIndex)
				} else {
					console.error(`菜单项${props.dropdownItem.title}未定义prop，返回内容失败`)
				}
			}

			watch(
				() => props.dropdownItem,
				(v) => {
					
					initData(v)
				}, {
					immediate: true
				},
			)

			return {
				daterange,
				datetag,
				dateTagList,
				handleStartDate,
				handleStartTime,
				handleEndTime,
				handleEndDate,
				handleTagDate,
				handleReset,
				handleConfirm,
			}
		},
	})
</script>

<style lang="scss" scoped>
	.da-dropdown-daterange-box {
		padding: 50rpx;

		&-one {
			margin-bottom: 18rpx;
			display: flex;
			align-items: center;

		}

		&-two {
			display: flex;
			align-items: center;
		}
	}

	// 日期范围
	.da-dropdown-daterange {
		font-size: 19rpx;
		// display: flex;
		// align-items: center;
		// margin: 24rpx;
		padding: 18rpx 80rpx;
		background-color: #f5f5f5;
		border-radius: 999rpx;

		&--date {
			flex-grow: 1;
			height: 120rpx;
			padding: 0 24rpx;
			font-size: 26rpx;
			line-height: 66rpx;
			color: var(--dropdown-text-color);
			text-align: center;
			border-radius: 4rpx;

			&.is-actived {
				color: var(--dropdown-theme-color);
			}
		}

		&--separate {
			flex-shrink: 0;
			padding: 0 20rpx;
		}

		&-tags {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			padding: 0 24rpx;
		}
	}

	.da-dropdown-tag {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 40rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		font-size: 28rpx;
		color: var(--dropdown-text-color);
		background-color: #f5f5f5;
		border-radius: 999rpx;

		&--text {
			position: relative;
			z-index: 1;
		}

		&.is-actived {
			color: var(--dropdown-theme-color);
			background-color: #fff;

			&::after {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 0;
				content: '';
				background-color: var(--dropdown-theme-color);
				opacity: 0.05;
			}
		}
	}
</style>